<!--
 * @Author: changwenqiao
 * @Date: 2021-10-23 16:50:52
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-10-26 19:28:27
 * @Description: 
-->
<template>
  <div>
    <el-button type="text" icon="el-icon-arrow-left" @click="backTo" 
      >返回</el-button
    >

    <el-table :data="data" style="width: 100%">
      <el-table-column
        type="index"
        :index="1"
        prop="date"
        label="序号"
        width="80"
      >
      </el-table-column>
      <el-table-column prop="orderLines[0].id" label="订单编号" width="180">
      </el-table-column>
      <el-table-column prop="id" label="产品编号" width="180">
      </el-table-column>
      <el-table-column
        prop="orderLines[0].product.name"
        label="产品"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="orderLines[0].product.photo"
        label="产品图片"
        width="180"
      >
        <template slot-scope="scope">
          <div>
            <el-popover placement="right-start" width="250" trigger="hover">
              <el-image
                style="width: 30px; height: 30px"
                :src="scope.row.orderLines[0].product.photo"
                slot="reference"
              ></el-image>
              <el-image
                style="width: 180px; height: 180px"
                :src="scope.row.orderLines[0].product.photo"
              ></el-image>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderLines[0].product.price"
        label="单价"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="total" label="数量" width="180"> </el-table-column>
    </el-table>

    <div class="info">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>订单基本信息</span>
        </div>
        <div class="text item" >
          <ul>
            <li>订单编号：{{ data[0].id }}</li>
            <li>订单状态：{{ data[0].status}}</li>
            <li>订单状态：{{ data[0].orderTime}}</li>
          </ul>
        </div>
      </el-card>

      <el-card v-if="'address' in data[0]" class="box-card">
        <div slot="header" class="clearfix">
          <span>雇主信息</span>
        </div>
        <div class="text item" >
          <ul>
            <li>雇主：{{ data[0].address.username }}</li>
            <li>雇主手机号：{{ data[0].address.telephone }}</li>
            <li>
              服务地址：{{ data[0].address.city }}{{ data[0].address.area
              }}{{ data[0].address.address }}
            </li>
          </ul>
        </div>
      </el-card>

        <el-card v-if="'customer' in data[0]" class="box-card" >
        <div slot="header" class="clearfix">
          <span>下单者信息</span>
        </div>
        <div class="text item">
          <ul>
            <li>雇主：{{ data[0].customer.username }}</li>
            <li>雇主手机号：{{ data[0].customer.telephone }}</li>
          </ul>
        </div>
      </el-card>

      <el-card v-if="'employee' in data[0] && JSON.stringify(data[0].employee) == '{}'" class="box-card" >
        <div slot="header" class="clearfix">
          <span>接单者信息</span>
        </div>
        <div class="text item">
          <ul>
            <li>雇主：{{ data[0].employee.username }}</li>
            <li>雇主手机号：{{ data[0].employee.telephone }}</li>
          </ul>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { showFileURL, uploadFileURL } from "@/utils/config";

export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      total: 0,
      data: [],
      imageUrl: "",
      //图片展示的基础路径
      showFileURL,
      //文件上传的路径
      uploadFileURL,
    };
  },
  methods: {
    //处理每页显示的条数
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      // this.queryPage()
    },
    //处理当前页
    handleCurrentChange(page) {
      this.params.page = page;
      // this.queryPage()
    },
    // backTo() {
    //   this.$router.push({
    //     path: "./index",
    //   });
    // },
    backTo(){
      // history.go(-1)
      this.$router.go(-1)
    }
  },
  created() {
    this.data[0] = this.$route.query;
    console.log(this.$route.query);
  },
};
</script>

<style lang="scss" scoped>
ul li {
  list-style: none;
  padding: 10px;
}
.info {
  padding: 20px;
  display: flex;
  .box-card {
    flex: 1;
    margin: 20px;
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both;
    }
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }
  }
}
</style>